<template>
    <div>
        <el-calendar v-model="value">
            <template #date-cell="{ data }">
                {{ data.day.split('-').slice(1).join('-') }}
                <p :class="data.day.isSelected ? 'is-selected' : ''">
                    {{ data.isSelected ? this.day : '班'}}
                </p>
            </template>
        </el-calendar>


        <!-- 修改节假日弹窗窗体开始 -->
        <el-dialog v-model="editCalHolidayDialogVisible" title="节假日设置" width="600" align-center>
            <el-form label-width="100px" :model="value" style="max-width: 460px">

                <el-form-item label="日期">
                    <el-input v-model="calendarValue" disabled placeholder="Please input" />
                </el-form-item>

                <el-form-item label="类型">
                    <el-radio-group v-model="radio">
                        <el-radio label="班">班</el-radio>
                        <el-radio label="休">休</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="doEdit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改节假日的弹窗窗体结束 -->
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    name: "calendar",
    data() {
        return {
            value: new Date(),
            calendarValue: null,
            editCalHolidayDialogVisible: false,
            radio:ref(),
            day:'休',
        };
    },
    watch: {
        value: function () {
            var year = this.value.getFullYear();
            var month = this.value.getMonth() + 1;
            var date = this.value.getDate()
            if (date >= 1 && date <= 9) {//日如果小于10就补个0
                date = "0" + date;
            }
            if (month >= 1 && month <= 9) {//月如果小于10就补个0
                month = "0" + month;
            }
            console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
            this.calendarValue = year + "-" + month + "-" + date;
            console.log("---------" + this.calendarValue);
            this.getCalendarList()   //  调用接口，把拼接好的参数传到后台
        }
    },
    methods: {
        getCalendarList() {
            this.editCalHolidayDialogVisible = true;
        },
        doEdit() {
            this.day = '休';
            this.cancelEdit();
        },
        cancelEdit() {
            this.editCalHolidayDialogVisible = false;
        },


    },
    mounted() {
        this.$nextTick(() => {
            // 更改element原生日历组件中按钮文字为上个月
            let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)>span');
            prevBtn.innerHTML = '上个月';
        }),
            this.$nextTick(() => {
                // 更改element原生日历组件中按钮文字为今天
                let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)>span');
                prevBtn.innerHTML = '今天';
            }),
            this.$nextTick(() => {
                // 更改element原生日历组件中按钮文字为下个月
                let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)>span');
                prevBtn.innerHTML = '下个月';
            })
    }
}
</script>

<style scoped>
.calendar-day {
    text-align: center;
    color: #202535;
    line-height: 30px;
    font-size: 12px;
}

#calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
    content: '当月';
}
</style>